<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件上传测试</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    //原生 XMLHttpRequest实现方式
    function onchangeUploadImg(e) {
        setImgTip("未上传");
        const input = document.querySelector("#uploadImg");
        const fileList = input.files;
        const fileReader = new FileReader();
        fileReader.readAsDataURL(fileList[0]);
        fileReader.onload = function(e){
            const container = document.querySelector("#imgContainer");
            container.innerHTML =  "<img style='height:100px' src="+this.result+" />";
        }
    }
    function setImgTip(tip) {
        document.querySelector("#imgTip").textContent=tip;
    }
    function uploadImg() {
        setImgTip("0%");
        const input = document.querySelector("#uploadImg");
        const fileList = input.files;
        const file = fileList[0];
        console.log(fileList);
        const xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress",(e)=>{
            console.log("progress",e);
            setImgTip(e.loaded/e.total+"%");
        });
        xhr.upload.addEventListener("load",e=>{
            console.log("load",e);
            setImgTip("100%");
        });
        xhr.open("post","/upload",true);
        const form = new FormData();
        form.append("file",file);
        xhr.send(form);
    }
    //jquery ajax 实现方式
    function onchangeUploadFile(e) {
        setFileTip("未上传");
        const fileList = $("#uploadFile")[0].files;
        console.log(fileList);
        const file = fileList[0];
        $("#fileTip").append($("<div>type:"+file.type+",fileName:"+file.name+"</div>"));
    }
    function setFileTip(tip) {
        $("#fileTip").text(tip);
    }
    function uploadFile(e) {
        setFileTip("0%");
        const fileList = $("#uploadFile")[0].files;
        const file = fileList[0];
        console.log(file);
        const form = new FormData();
        form.append("file",file);
        $.ajax({
            async:true,
            contentType:false,
            dataType:"json",
            data:form,
            type:"post",
            url:"/upload",
            processData:false,
            success:function(res){
                console.log(res);
            },
            xhr:function() {
                const xhr = $.ajaxSettings.xhr();
                xhr.upload.onprogress = function(e) {
                    setFileTip(Math.round(e.loaded/e.total * 100) / 100+"%");
                };
                xhr.upload.onload = function(e) {
                    setFileTip("100%");
                };
                xhr.upload.onerror = function(e) {
                    setFileTip("文件上传失败");
                }
                return xhr;
            }
        })
    }

</script>
<body>
    <h3>上传图片</h3>
    <div>
        <button>
            <label for="uploadImg">选择图片</label>
        </button>
        <div id="imgContainer">
        </div>
        上传进度：<span id="imgTip"></span>
        <input onchange="onchangeUploadImg()" style="display: none" id="uploadImg" type="file" accept=".jpg, .png"></input></br>
        <button onclick="uploadImg()">上传</button> 
    </div>
    <hr/>
    <h3>上传文件</h3>
    <div>
        <button>
            <label for="uploadFile">选择文件</label>
        </button>
        <div id="fileContainer">
        </div>
        上传进度：<span id="fileTip"></span>
        <input onchange="onchangeUploadFile()" style="display: none" id="uploadFile" type="file"></input></br>
        <button onclick="uploadFile()">上传</button> 
    </div>

</body>
</html>